<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>家族族谱 - 传承家族记忆，连接世代亲情</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#D4AF37',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            },
            honor: '#00B42A',
            shame: '#F53F3F',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .mobile-friendly {
        @apply flex flex-col items-center;
      }
      .card-mobile {
        @apply w-full max-w-sm;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .text-balance {
        text-wrap: balance;
      }
    }
  </style>
  
  <style>
    /* 导入Inter字体 */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      scroll-behavior: smooth;
    }
    
    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .pulse {
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
  </style>
</head>
<body class="bg-neutral-100 text-neutral-700 font-inter min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- 品牌标识 -->
        <div class="flex items-center">
          <a href="#" class="flex items-center">
            <i class="fa fa-sitemap text-primary text-2xl mr-2"></i>
            <span class="text-xl font-bold text-primary">家族族谱</span>
          </a>
        </div>
        
        <!-- 主导航 - 桌面版 -->
        <nav class="hidden md:flex space-x-8">
          <a href="library.html" class="text-neutral-600 hover:text-primary font-medium transition-colors duration-200 flex items-center">
            <i class="fa fa-book mr-1"></i> 家族资料库
          </a>
          <a href="ai-access.html" class="text-neutral-600 hover:text-primary font-medium transition-colors duration-200 flex items-center">
            <i class="fa fa-lightbulb-o mr-1"></i> AI快速访问
          </a>
          <a href="honors.html" class="text-neutral-600 hover:text-honor font-medium transition-colors duration-200 flex items-center">
            <i class="fa fa-trophy mr-1"></i> 家族荣誉榜
          </a>
          <a href="disgraces.html" class="text-neutral-600 hover:text-shame font-medium transition-colors duration-200 flex items-center">
            <i class="fa fa-exclamation-triangle mr-1"></i> 家族耻辱榜
          </a>
        </nav>
        
        <!-- 用户操作区 -->
        <div class="flex items-center space-x-4">
          <a href="login.html" class="hidden md:block px-4 py-2 text-sm font-medium text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors duration-200">
            登录
          </a>
          <a href="register.html" class="hidden md:block px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors duration-200">
            注册
          </a>
          
          <!-- 移动端菜单按钮 -->
          <button id="mobile-menu-button" class="md:hidden text-neutral-600 hover:text-primary focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="library.html" class="block px-3 py-2 text-base font-medium text-neutral-600 hover:text-primary hover:bg-primary/5 rounded-md">
          <i class="fa fa-book mr-2"></i>家族资料库
        </a>
        <a href="ai-access.html" class="block px-3 py-2 text-base font-medium text-neutral-600 hover:text-primary hover:bg-primary/5 rounded-md">
          <i class="fa fa-lightbulb-o mr-2"></i>AI快速访问
        </a>
        <a href="honors.html" class="block px-3 py-2 text-base font-medium text-neutral-600 hover:text-honor hover:bg-honor/5 rounded-md">
          <i class="fa fa-trophy mr-2"></i>家族荣誉榜
        </a>
        <a href="disgraces.html" class="block px-3 py-2 text-base font-medium text-neutral-600 hover:text-shame hover:bg-shame/5 rounded-md">
          <i class="fa fa-exclamation-triangle mr-2"></i>家族耻辱榜
        </a>
        <div class="pt-4 pb-3 border-t border-neutral-200 flex space-x-4 px-3">
          <a href="login.html" class="flex-1 px-4 py-2 text-sm font-medium text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors duration-200">
            登录
          </a>
          <a href="register.html" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors duration-200">
            注册
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow">
    <!-- 英雄区域 -->
    <section class="relative bg-gradient-to-r from-primary/90 to-primary text-white overflow-hidden">
      <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0 bg-[url('https://picsum.photos/id/1074/1920/1080')] bg-cover bg-center"></div>
      </div>
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-shadow fade-in text-balance">
            传承家族记忆，连接世代亲情
          </h1>
          <p class="text-lg sm:text-xl md:text-2xl mb-8 text-white/90 fade-in text-balance" style="animation-delay: 100ms">
            一个集多媒体存储、AI分析于一体的现代化家族族谱平台
          </p>
          <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="animation-delay: 200ms">
            <button id="create-tree-btn" class="px-6 py-3 bg-white text-primary font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 w-full sm:w-auto">
              开始创建族谱
            </button>
            <button class="px-6 sm:px-8 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transform hover:-translate-y-1 transition-all duration-300">
              了解更多 <i class="fa fa-arrow-right ml-2"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 波浪装饰 -->
      <div class="absolute bottom-0 left-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" class="w-full h-auto fill-neutral-100">
          <path d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,120L1380,120C1320,120,1200,120,1080,120C960,120,840,120,720,120C600,120,480,120,360,120C240,120,120,120,60,120L0,120Z"></path>
        </svg>
      </div>
    </section>

    <!-- 功能概述 -->
    <section class="py-16 bg-neutral-100">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-4 text-balance">强大功能，记录家族的每一个故事</h2>
          <p class="text-lg text-neutral-500 max-w-3xl mx-auto text-balance">我们提供全方位的家族记忆保存方案，让每一段历史都不被遗忘</p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          <!-- 功能卡片1 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-neutral-200 transform hover:-translate-y-2">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-book text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3 text-neutral-700">家族资料库</h3>
            <p class="text-neutral-500">支持图片、视频、语音等多种媒体格式，全方位记录家族历史与故事。</p>
          </div>
          
          <!-- 功能卡片2 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-neutral-200 transform hover:-translate-y-2">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-lightbulb-o text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3 text-neutral-700">AI快速访问</h3>
            <p class="text-neutral-500">利用人工智能技术，快速搜索和分析家族数据，发现家族成员间的联系。</p>
          </div>
          
          <!-- 功能卡片3 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-neutral-200 transform hover:-translate-y-2">
            <div class="w-14 h-14 bg-honor/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-trophy text-2xl text-honor"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3 text-neutral-700">家族荣誉榜</h3>
            <p class="text-neutral-500">记录和展示家族成员的成就与荣誉，激励后人传承优良传统。</p>
          </div>
          
          <!-- 功能卡片4 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-neutral-200 transform hover:-translate-y-2">
            <div class="w-14 h-14 bg-shame/10 rounded-lg flex items-center justify-center mb-6">
              <i class="fa fa-exclamation-triangle text-2xl text-shame"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3 text-neutral-700">家族耻辱榜</h3>
            <p class="text-neutral-500">记载家族成员的不当行为，警示后人引以为戒，恪守家族美德。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 家族资料库 -->
    <section id="library" class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-4 text-balance">家族资料库</h2>
          <p class="text-lg text-neutral-500 max-w-3xl mx-auto text-balance">多媒体记录家族的每一个珍贵瞬间，让记忆永不褪色</p>
        </div>
        
        <!-- 媒体类型标签 -->
        <div class="flex flex-wrap justify-center gap-3 mb-10">
          <button class="px-5 py-2 bg-primary text-white rounded-full text-sm font-medium">全部内容</button>
          <button class="px-5 py-2 bg-neutral-200 text-neutral-600 hover:bg-neutral-300 rounded-full text-sm font-medium transition-colors">照片</button>
          <button class="px-5 py-2 bg-neutral-200 text-neutral-600 hover:bg-neutral-300 rounded-full text-sm font-medium transition-colors">视频</button>
          <button class="px-5 py-2 bg-neutral-200 text-neutral-600 hover:bg-neutral-300 rounded-full text-sm font-medium transition-colors">音频</button>
          <button class="px-5 py-2 bg-neutral-200 text-neutral-600 hover:bg-neutral-300 rounded-full text-sm font-medium transition-colors">文档</button>
        </div>
        
        <!-- 媒体展示区 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- 照片卡片 -->
          <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 bg-white border border-neutral-200 group">
            <div class="relative overflow-hidden h-60">
              <img src="https://picsum.photos/id/1025/600/400" alt="家族聚会照片" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-sm">
                <i class="fa fa-image text-primary"></i>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-lg font-semibold mb-2 text-neutral-700">1985年春节家族聚会</h3>
              <p class="text-neutral-500 text-sm mb-4">记录了家族三代人在老家的春节团聚，共42位家族成员参加。</p>
              <div class="flex justify-between items-center">
                <span class="text-xs text-neutral-400">1985年2月20日</span>
                <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                  查看详情 <i class="fa fa-angle-right ml-1"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 视频卡片 -->
          <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 bg-white border border-neutral-200 group">
            <div class="relative overflow-hidden h-60">
              <img src="https://picsum.photos/id/1074/600/400" alt="家族婚礼视频封面" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <div class="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center">
                  <i class="fa fa-play text-primary text-xl"></i>
                </div>
              </div>
              <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-sm">
                <i class="fa fa-video-camera text-primary"></i>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-lg font-semibold mb-2 text-neutral-700">王家族长80大寿庆典</h3>
              <p class="text-neutral-500 text-sm mb-4">2010年王家族长八十大寿庆典全程录像，记录了家族成员的祝福。</p>
              <div class="flex justify-between items-center">
                <span class="text-xs text-neutral-400">2010年5月15日</span>
                <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                  播放视频 <i class="fa fa-angle-right ml-1"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 音频卡片 -->
          <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 bg-white border border-neutral-200 group">
            <div class="relative overflow-hidden h-60 bg-gradient-to-r from-primary/80 to-primary">
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-20 h-20 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center pulse">
                  <i class="fa fa-microphone text-white text-3xl"></i>
                </div>
              </div>
              <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-sm">
                <i class="fa fa-volume-up text-primary"></i>
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-lg font-semibold mb-2 text-neutral-700">老祖母讲述家族起源</h3>
              <p class="text-neutral-500 text-sm mb-4">1998年录制的老祖母口述家族历史，讲述了王家从山西迁徙的历程。</p>
              <div class="flex justify-between items-center">
                <span class="text-xs text-neutral-400">1998年8月3日</span>
                <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                  收听录音 <i class="fa fa-angle-right ml-1"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="text-center mt-10">
          <button class="px-6 py-3 border border-primary text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-colors duration-300">
            查看更多资料 <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- AI快速访问 -->
    <section id="ai-access" class="py-16 bg-neutral-100">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-6 text-balance">AI助力，快速探索家族历史</h2>
            <p class="text-lg text-neutral-500 mb-8 text-balance">利用先进的人工智能技术，轻松搜索家族成员信息，分析家族关系，发现隐藏的家族故事</p>
            
            <!-- AI功能列表 -->
            <div class="space-y-4 mb-8">
              <div class="flex items-start">
                <div class="mt-1 bg-primary/10 rounded-full p-1 mr-4">
                  <i class="fa fa-search text-primary"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-neutral-700 mb-1">智能搜索</h3>
                  <p class="text-neutral-500">自然语言查询，快速找到相关家族成员和历史事件</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="mt-1 bg-primary/10 rounded-full p-1 mr-4">
                  <i class="fa fa-sitemap text-primary"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-neutral-700 mb-1">关系分析</h3>
                  <p class="text-neutral-500">自动分析家族成员间的关系，生成可视化家族图谱</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="mt-1 bg-primary/10 rounded-full p-1 mr-4">
                  <i class="fa fa-lightbulb-o text-primary"></i>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-neutral-700 mb-1">故事发现</h3>
                  <p class="text-neutral-500">智能关联家族事件，发现潜在的家族故事和历史联系</p>
                </div>
              </div>
            </div>
            
            <button class="px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors duration-300">
              体验AI功能 <i class="fa fa-rocket ml-2"></i>
            </button>
          </div>
          
          <!-- AI搜索演示 -->
          <div class="bg-white rounded-2xl shadow-xl p-6 border border-neutral-200">
            <div class="mb-6">
              <h3 class="text-xl font-semibold text-neutral-700 mb-4">AI智能查询</h3>
              <div class="relative">
                <input type="text" placeholder="请输入您想查询的家族信息..." class="w-full px-5 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all">
                <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80">
                  <i class="fa fa-search text-xl"></i>
                </button>
              </div>
            </div>
            
            <!-- 示例查询 -->
            <div class="mb-6">
              <p class="text-sm text-neutral-500 mb-2">示例查询：</p>
              <div class="flex flex-wrap gap-2">
                <button class="px-3 py-1 bg-neutral-100 text-neutral-600 text-sm rounded-full hover:bg-neutral-200 transition-colors">谁是家族中最长寿的人？</button>
                <button class="px-3 py-1 bg-neutral-100 text-neutral-600 text-sm rounded-full hover:bg-neutral-200 transition-colors">1950年代家族有哪些重要事件？</button>
                <button class="px-3 py-1 bg-neutral-100 text-neutral-600 text-sm rounded-full hover:bg-neutral-200 transition-colors">找出所有从事教育工作的家族成员</button>
              </div>
            </div>
            
            <!-- AI回答示例 -->
            <div class="bg-neutral-50 rounded-xl p-5 border border-neutral-200">
              <div class="flex items-start mb-4">
                <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-sm font-bold mr-3 flex-shrink-0">AI</div>
                <p class="text-neutral-700 text-sm">家族中最长寿的成员是王李氏（1898-2005），享年107岁。她经历了清朝末期至21世纪初的历史变迁，见证了家族五代人的成长。在1998年的录音中，她详细讲述了家族在民国时期的发展历程。</p>
              </div>
              
              <div class="flex flex-wrap gap-3 mt-4">
                <div class="flex items-center bg-white rounded-lg p-2 shadow-sm text-sm">
                  <i class="fa fa-user text-primary mr-2"></i>
                  <span>王李氏 (1898-2005)</span>
                </div>
                <div class="flex items-center bg-white rounded-lg p-2 shadow-sm text-sm">
                  <i class="fa fa-volume-up text-primary mr-2"></i>
                  <span>1998年口述录音</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 家族荣誉榜 -->
    <section id="honor" class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-4 text-balance">家族荣誉榜</h2>
          <p class="text-lg text-neutral-500 max-w-3xl mx-auto text-balance">记录家族成员的辉煌成就，传承优良家风，激励后人奋进</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          <!-- 荣誉卡片1 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-neutral-200 overflow-hidden group">
            <div class="h-48 bg-gradient-to-r from-honor/20 to-honor/5 p-6 flex items-center justify-center">
              <div class="w-24 h-24 rounded-full bg-honor/10 flex items-center justify-center pulse group-hover:scale-110 transition-transform">
                <i class="fa fa-medal text-4xl text-honor"></i>
              </div>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-semibold text-neutral-700">王建国 - 战斗英雄</h3>
                <span class="bg-honor/10 text-honor text-xs font-medium px-2.5 py-0.5 rounded">1952年</span>
              </div>
              <p class="text-neutral-500 mb-4">在抗美援朝战争中表现英勇，荣立一等功，被授予"战斗英雄"称号，为国家和家族赢得荣誉。</p>
              <button class="text-honor hover:text-honor/80 text-sm font-medium flex items-center">
                查看详细事迹 <i class="fa fa-angle-right ml-1"></i>
              </button>
            </div>
          </div>
          
          <!-- 荣誉卡片2 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-neutral-200 overflow-hidden group">
            <div class="h-48 bg-gradient-to-r from-honor/20 to-honor/5 p-6 flex items-center justify-center">
              <div class="w-24 h-24 rounded-full bg-honor/10 flex items-center justify-center pulse group-hover:scale-110 transition-transform">
                <i class="fa fa-flask text-4xl text-honor"></i>
              </div>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-semibold text-neutral-700">王丽华 - 医学贡献</h3>
                <span class="bg-honor/10 text-honor text-xs font-medium px-2.5 py-0.5 rounded">1985年</span>
              </div>
              <p class="text-neutral-500 mb-4">在医学领域取得重大突破，研发的新型药物拯救了数千人的生命，获得国家科技进步一等奖。</p>
              <button class="text-honor hover:text-honor/80 text-sm font-medium flex items-center">
                查看详细事迹 <i class="fa fa-angle-right ml-1"></i>
              </button>
            </div>
          </div>
          
          <!-- 荣誉卡片3 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-neutral-200 overflow-hidden group">
            <div class="h-48 bg-gradient-to-r from-honor/20 to-honor/5 p-6 flex items-center justify-center">
              <div class="w-24 h-24 rounded-full bg-honor/10 flex items-center justify-center pulse group-hover:scale-110 transition-transform">
                <i class="fa fa-globe text-4xl text-honor"></i>
              </div>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-semibold text-neutral-700">王明 - 国际成就</h3>
                <span class="bg-honor/10 text-honor text-xs font-medium px-2.5 py-0.5 rounded">2012年</span>
              </div>
              <p class="text-neutral-500 mb-4">在国际学术领域表现卓越，其研究成果获得全球认可，当选为国际科学院院士，为国争光。</p>
              <button class="text-honor hover:text-honor/80 text-sm font-medium flex items-center">
                查看详细事迹 <i class="fa fa-angle-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="text-center mt-10">
          <button class="px-6 py-3 border border-honor text-honor font-medium rounded-lg hover:bg-honor hover:text-white transition-colors duration-300">
            查看更多荣誉 <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- 家族耻辱榜 -->
    <section id="shame" class="py-16 bg-neutral-100">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-4 text-balance">家族耻辱榜</h2>
          <p class="text-lg text-neutral-500 max-w-3xl mx-auto text-balance">铭记历史教训，警示后人恪守道德底线，维护家族声誉</p>
          <p class="text-sm text-neutral-400 mt-2 italic">注：记录此榜非为羞辱，而是为警醒后人，引以为戒</p>
        </div>
        
        <div class="max-w-3xl mx-auto space-y-6">
          <!-- 耻辱记录1 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-neutral-200 overflow-hidden">
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-semibold text-neutral-700">王志强 - 贪污入狱</h3>
                <span class="bg-shame/10 text-shame text-xs font-medium px-2.5 py-0.5 rounded">1997年</span>
              </div>
              <p class="text-neutral-500 mb-4">在担任地方官员期间，利用职务之便贪污公款，数额巨大，被依法判处有期徒刑15年。此事给家族声誉带来严重损害，成为家族的深刻教训。</p>
              <div class="bg-neutral-50 p-4 rounded-lg border border-neutral-200">
                <h4 class="text-sm font-semibold text-neutral-700 mb-2">家族训诫</h4>
                <p class="text-sm text-neutral-600 italic">"为官当清廉，做人当正直。贪腐之路，不仅毁己，更辱没门楣。后人当以此为戒，坚守本心，清白做人。"</p>
              </div>
            </div>
          </div>
          
          <!-- 耻辱记录2 -->
          <div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-neutral-200 overflow-hidden">
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-semibold text-neutral-700">王秀丽 - 遗弃老人</h3>
                <span class="bg-shame/10 text-shame text-xs font-medium px-2.5 py-0.5 rounded">2015年</span>
              </div>
              <p class="text-neutral-500 mb-4">因家庭矛盾，将年迈多病的母亲遗弃在养老院多年不闻不问，拒不履行赡养义务，被社区公示批评，引发社会舆论谴责。</p>
              <div class="bg-neutral-50 p-4 rounded-lg border border-neutral-200">
                <h4 class="text-sm font-semibold text-neutral-700 mb-2">家族训诫</h4>
                <p class="text-sm text-neutral-600 italic">"百善孝为先，赡养父母是天经地义。遗弃老人，天理不容，家族不齿。后人当铭记：不孝之人，无颜立于天地之间。"</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 查看更多按钮 -->
        <div class="text-center mt-10">
          <button class="px-6 py-3 border border-shame text-shame font-medium rounded-lg hover:bg-shame hover:text-white transition-colors duration-300">
            查看更多记录 <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-neutral-700 mb-4 text-balance">家族数据概览</h2>
          <p class="text-lg text-neutral-500 max-w-3xl mx-auto text-balance">通过数据了解家族的规模与发展</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <!-- 统计卡片 -->
          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
            <div class="bg-neutral-50 rounded-xl p-4 sm:p-6 text-center border border-neutral-200">
              <div class="text-3xl sm:text-4xl font-bold text-primary mb-2" id="member-count">286</div>
              <p class="text-neutral-500 text-sm sm:text-base">家族成员</p>
            </div>
            
            <div class="bg-neutral-50 rounded-xl p-4 sm:p-6 text-center border border-neutral-200">
              <div class="text-3xl sm:text-4xl font-bold text-primary mb-2" id="photo-count">1,452</div>
              <p class="text-neutral-500 text-sm sm:text-base">照片资料</p>
            </div>
            
            <div class="bg-neutral-50 rounded-xl p-4 sm:p-6 text-center border border-neutral-200">
              <div class="text-3xl sm:text-4xl font-bold text-primary mb-2" id="video-count">87</div>
              <p class="text-neutral-500 text-sm sm:text-base">视频资料</p>
            </div>
            
            <div class="bg-neutral-50 rounded-xl p-4 sm:p-6 text-center border border-neutral-200">
              <div class="text-3xl sm:text-4xl font-bold text-primary mb-2" id="story-count">324</div>
              <p class="text-neutral-500 text-sm sm:text-base">家族故事</p>
            </div>
          </div>
          
          <!-- 图表 -->
          <div class="bg-neutral-50 rounded-xl p-6 border border-neutral-200">
            <h3 class="text-lg font-semibold text-neutral-700 mb-4">家族成员分布</h3>
            <div class="h-64">
              <canvas id="familyChart"></canvas>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行动召唤 -->
    <section class="py-20 bg-gradient-to-r from-primary/90 to-primary text-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6 text-balance">开始记录您的家族历史</h2>
        <p class="text-lg sm:text-xl mb-10 max-w-3xl mx-auto text-white/90 text-balance">加入我们，一起传承家族记忆，连接世代亲情，让家族的故事永远流传</p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <a href="register.html" class="px-6 sm:px-8 py-3 bg-white text-primary font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
            立即注册 <i class="fa fa-user-plus ml-2"></i>
          </a>
          <button class="px-6 sm:px-8 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transform hover:-translate-y-1 transition-all duration-300">
            了解会员方案 <i class="fa fa-info-circle ml-2"></i>
          </button>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-neutral-700 text-white pt-16 pb-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
        <!-- 关于我们 -->
        <div>
          <div class="flex items-center mb-6">
            <i class="fa fa-sitemap text-white text-2xl mr-2"></i>
            <span class="text-xl font-bold">家族族谱</span>
          </div>
          <p class="text-neutral-300 mb-6">致力于帮助每个家族记录和传承自己的历史与文化，让亲情跨越时空，连接世代。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-qq text-xl"></i>
            </a>
          </div>
        </div>
        
        <!-- 功能链接 -->
        <div>
          <h3 class="text-lg font-semibold mb-6">功能导航</h3>
          <ul class="space-y-3">
            <li><a href="#library" class="text-neutral-300 hover:text-white transition-colors">家族资料库</a></li>
            <li><a href="#ai-access" class="text-neutral-300 hover:text-white transition-colors">AI快速访问</a></li>
            <li><a href="#honor" class="text-neutral-300 hover:text-white transition-colors">家族荣誉榜</a></li>
            <li><a href="#shame" class="text-neutral-300 hover:text-white transition-colors">家族耻辱榜</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">家族活动日历</a></li>
          </ul>
        </div>
        
        <!-- 帮助中心 -->
        <div>
          <h3 class="text-lg font-semibold mb-6">帮助中心</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">新手指南</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">使用教程</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">联系客服</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">意见反馈</a></li>
          </ul>
        </div>
        
        <!-- 联系我们 -->
        <div>
          <h3 class="text-lg font-semibold mb-6">联系我们</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fa fa-envelope-o text-neutral-300 mt-1 mr-3"></i>
              <span class="text-neutral-300">contact@jiazu.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone text-neutral-300 mt-1 mr-3"></i>
              <span class="text-neutral-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker text-neutral-300 mt-1 mr-3"></i>
              <span class="text-neutral-300">北京市海淀区科技园区88号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 版权信息 -->
      <div class="pt-8 border-t border-neutral-600 text-center text-neutral-400 text-sm">
        <p>© 2023 家族族谱 版权所有 | 隐私政策 | 服务条款</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });

    // 开始创建族谱按钮点击事件
    document.getElementById('create-tree-btn')?.addEventListener('click', function() {
      window.location.href = 'create-tree.html';
    });

    // 为所有没有实现的按钮添加点击事件
    document.querySelectorAll('button:not([id])').forEach(button => {
      button.addEventListener('click', function() {
        const text = this.textContent.trim();
        alert(`"${text}" 功能即将上线，敬请期待！`);
      });
    });
    
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const header = document.querySelector('header');
      if (window.scrollY > 50) {
        header.classList.add('bg-white/95', 'backdrop-blur-sm');
        header.classList.remove('bg-white');
      } else {
        header.classList.add('bg-white');
        header.classList.remove('bg-white/95', 'backdrop-blur-sm');
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动端菜单
          document.getElementById('mobile-menu').classList.add('hidden');
        }
      });
    });
    
    // 数据统计动画
    function animateValue(id, start, end, duration) {
      const obj = document.getElementById(id);
      if (!obj) return;
      
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        
        // 处理千位分隔符
        const value = Math.floor(progress * (end - start) + start);
        obj.innerText = value.toLocaleString();
        
        if (progress < 1) {
          window.requestAnimationFrame(step);
        }
      };
      window.requestAnimationFrame(step);
    }
    
    // 监听元素进入视口
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          if (entry.target.id === 'member-count') {
            animateValue('member-count', 0, 286, 2000);
          } else if (entry.target.id === 'photo-count') {
            animateValue('photo-count', 0, 1452, 2000);
          } else if (entry.target.id === 'video-count') {
            animateValue('video-count', 0, 87, 2000);
          } else if (entry.target.id === 'story-count') {
            animateValue('story-count', 0, 324, 2000);
          }
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });
    
    // 观察统计数字元素
    document.querySelectorAll('#member-count, #photo-count, #video-count, #story-count').forEach(el => {
      observer.observe(el);
    });
    
        // API交互功能
        async function fetchFamilyData() {
            try {
                // 获取家族成员
                const membersResponse = await fetch('http://localhost:3000/api/members', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors'
                });
                const members = await membersResponse.json();
                console.log('家族成员数据:', members);

                // 获取媒体资料
                const mediaResponse = await fetch('http://localhost:3000/api/media', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors'
                });
                const media = await mediaResponse.json();
                console.log('媒体资料数据:', media);

                // 获取荣誉榜
                const honorsResponse = await fetch('http://localhost:3000/api/honors', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors'
                });
                const honors = await honorsResponse.json();
                console.log('荣誉榜数据:', honors);

                // 获取耻辱榜
                const disgracesResponse = await fetch('http://localhost:3000/api/disgraces', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors'
                });
                const disgraces = await disgracesResponse.json();
                console.log('耻辱榜数据:', disgraces);

                // 更新UI
                updateFamilyMembersUI(members);
                updateMediaUI(media);
                updateHonorsUI(honors);
                updateDisgracesUI(disgraces);
            } catch (error) {
                console.error('获取家族数据失败:', error);
            }
        }

        function updateFamilyMembersUI(members) {
            // 更新家族成员列表UI
            const memberList = document.getElementById('family-members-list');
            if (memberList) {
                memberList.innerHTML = '';
                members.forEach(member => {
                    const memberCard = document.createElement('div');
                    memberCard.className = 'bg-white rounded-lg shadow-md p-4 mb-4';
                    memberCard.innerHTML = `
                        <h3 class="text-lg font-bold">${member.name}</h3>
                        <p class="text-gray-600">${member.gender} | ${member.birth_date || '未知出生日期'}</p>
                        <p class="mt-2">${member.biography || '暂无简介'}</p>
                    `;
                    memberList.appendChild(memberCard);
                });
            }
        }

        function updateMediaUI(media) {
            // 更新媒体资料UI
            const mediaContainer = document.getElementById('media-container');
            if (mediaContainer) {
                mediaContainer.innerHTML = '';
                media.forEach(item => {
                    const mediaCard = document.createElement('div');
                    mediaCard.className = 'bg-white rounded-lg shadow-md p-4 mb-4';
                    mediaCard.innerHTML = `
                        <h3 class="text-lg font-bold">${item.title}</h3>
                        <p class="text-gray-600">类型: ${item.type}</p>
                        <a href="${item.url}" class="text-blue-600 hover:underline">查看媒体</a>
                    `;
                    mediaContainer.appendChild(mediaCard);
                });
            }
        }

        function updateHonorsUI(honors) {
            // 更新荣誉榜UI
            const honorsContainer = document.getElementById('honors-container');
            if (honorsContainer) {
                honorsContainer.innerHTML = '';
                honors.forEach(honor => {
                    const honorCard = document.createElement('div');
                    honorCard.className = 'bg-white rounded-lg shadow-md p-4 mb-4';
                    honorCard.innerHTML = `
                        <h3 class="text-lg font-bold">${honor.title}</h3>
                        <p class="text-gray-600">日期: ${honor.date || '未知'}</p>
                        <p class="mt-2">${honor.description || '暂无描述'}</p>
                    `;
                    honorsContainer.appendChild(honorCard);
                });
            }
        }

        function updateDisgracesUI(disgraces) {
            // 更新耻辱榜UI
            const disgracesContainer = document.getElementById('disgraces-container');
            if (disgracesContainer) {
                disgracesContainer.innerHTML = '';
                disgraces.forEach(disgrace => {
                    const disgraceCard = document.createElement('div');
                    disgraceCard.className = 'bg-white rounded-lg shadow-md p-4 mb-4';
                    disgraceCard.innerHTML = `
                        <h3 class="text-lg font-bold">${disgrace.title}</h3>
                        <p class="text-gray-600">日期: ${disgrace.date || '未知'}</p>
                        <p class="mt-2">${disgrace.description || '暂无描述'}</p>
                    `;
                    disgracesContainer.appendChild(disgraceCard);
                });
            }
        }

        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', fetchFamilyData);

    // 初始化图表
    window.addEventListener('load', function() {
      const ctx = document.getElementById('familyChart');
      if (ctx) {
        new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ['华北地区', '华东地区', '华南地区', '海外', '其他地区'],
            datasets: [{
              data: [35, 25, 15, 10, 15],
              backgroundColor: [
                '#165DFF',
                '#36CFC9',
                '#722ED1',
                '#FF7B47',
                '#F7BA1E'
              ],
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'bottom'
              }
            },
            cutout: '65%'
          }
        });
      }
    });
  </script>
</body>
</html>
